<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <el-input v-model="search.contract_no" placeholder="请输入合同单号" clearable @change="upsearch" />
                <el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC" clearable @change="upsearch" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="合同号" align="center" width="160" sortable>
                    <template #default="{row}">
                        <div>{{row.contract_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
                    <template #default="{row}">
                        <div class="shopInfo" v-if="row.goods">
                            <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{row.factory_number}}</div>
                                <div>批次号：{{row.batch_number}}</div>
                                <div>SKC：{{row.skc}}</div>
                                <div>商品品牌：{{row.brand_name}}</div>
                                <div>客户：{{row.custom_name}}</div>
                                <div>颜色：{{row.goods.colour}}</div>
                                <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="尺码" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.goods_size}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="此单后整数量" prop="total_weaving_count" align="center" width="100">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.weaving_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="已收数量" prop="total_complete_count" align="center" width="100">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.complete_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单标签" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.order_label==1" type="danger">加急</el-tag>
                        <el-tag v-else type="success">正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="针种" prop="needle_seed_title" align="center" width="100"></el-table-column>
                <el-table-column label="毛种" prop="wool_seed" align="center" width="100"></el-table-column>
                <el-table-column label="生产交期" prop="due_date" align="center" width="150" sortable></el-table-column>
                <el-table-column label="后整日期" prop="contract_date" align="center" width="150" sortable></el-table-column>
                <el-table-column label="工序" prop="produce_process_name" align="center" width="100"></el-table-column>
                <el-table-column label="承制人" align="center" width="100" sortable  column-key="filterApply" :filters="chengFilters">
					<template #default="{row}">
						<div>{{row.apply_name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="制单人" align="center" width="100" column-key="filterCreate" :filters="zhiFilters">
                    <template #default="{row}">
						<div>{{row.creator_name}}</div>
					</template>
                </el-table-column>
                <el-table-column label="单价" prop="price" align="center" width="100"></el-table-column>
                <el-table-column label="单位" prop="unit_name" align="center" width="100"></el-table-column>
                <el-table-column label="完工" align="center" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.is_completed==1" type="success">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        
    </el-container>
</template>
<script>

export default {
	name: 'user',
	data() {
		return {
            dialog:{
                save:false,
            },
			group: [],
            apiObj: this.$API.produce.contract.viewContract,
            query:{
                process_id:8,
                is_local:1,
            },
			selection: [],
            needleList:[],//针种
			search: {
				time_range: null,
				keyword: null,
                supplier_id:null,
                creator:null,
                order_no:null,
			},
            produce_no:"",
            apply:[],
            applyList:[],
		}
	},
	mounted() {
        this.getApply()
    },
	methods: {
        upsearch() {
            this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        selectionChanges(selection) {
			this.selection = selection;
		},
        //所有针种
        async getNeedle(){
            var res = await this.$API.all.needle.get();
            this.needleList = res.data;
        },
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.apply = res.data;
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>